<template>
  <!-- 随机美文  -->
  <div>
    <myheader title="文章详情" rightBtn="主页" @updataInfo="submitRecruit"></myheader>
    <div class="aBeautifulRticle">
      <van-tag
        type="success"
        style=" background-color: #efefef !important;
  border: none !important; color:#222 !important;"
        class="tip"
        @click="change"
      >换一篇</van-tag>
      <div class="content">
        <h2>{{article.title}}</h2>
        <div class="decs">
          <span>{{article.author}}</span>
          <span>{{article.created_at}}</span>
        </div>
      </div>
      <p v-html="article.content"></p>
    </div>
  </div>
</template>

<script>
import myheader from '../../../comon/myheader.vue'
export default {
  components: {
    myheader,
  },
  data() {
    return {
      article: '',
    }
  },
  created() {
    this.init()
  },
  methods: {
    change() {
      this.init()
    },
    async init() {
      const res = await this.$axios.get('https://v2.alapi.cn/api/mryw/random', {
        params: {
          token: this.$path.ALAPI_TOKEN,
        },
      })
      if ((res.data.code = 200)) {
        this.article = res.data.data
      }
    },
  },
}
</script>
  
<style scoped>
.aBeautifulRticle {
  margin-top: 75px;
  position: relative;
}
p {
  font-size: 16px;
  padding: 0.2rem 0.5rem;
  margin: 15px 0 !important;
  font-size: 17px;
  color: #616466;
}
.content {
  font-size: 17px;
  color: #616466;
  margin: 10px 0 20px;
}
.decs span {
  display: flex;
  justify-content: center;
  align-content: center;
}
.content h2 {
  text-align: center;
}
.tip {
  position: absolute;
  right: 2%;
  font-size: 16px;
  padding: 7px;
  margin-top: 14%;
}
</style>